import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";

# Troubleshooting

<h2 id="jsxImportSource">jsxImportSource was not set to 'nativewind'</h2>

NativeWind requires the JSX runtime to be set to `automatic` and the `jsxImportSource` (sometimes called `jsxPragma`) to be changed to 'nativewind'.

For Metro apps, this typically means you are missing the `nativewind/babel` preset

```jsx title=babel.config.js
module.exports = function (api) {
  return {
    presets: ["<existing presets>", "nativewind/babel"],
  };
};
```

If you are still receiving this error after including the preset, you most likely have another preset or plugin overriding the `jsxImportSource`. If so, explicitly set the options of `@babel/plugin-transform-react-jsx` within your `plugins` array.

```diff title=babel.config.js
module.exports = function (api) {
  return {
    presets: ["nativewind/babel"],
    plugins: [
      "<plugin-causing-issue>",
+     [
+       "@babel/plugin-transform-react-jsx",
+       {
+         runtime: "automatic",
+         importSource: "nativewind",
+       },
+     ],
    ],
  };
};
```

<h2 id="no-data">Nativewind received no data</h2>

This error will occur if NativeWind never injects StyleSheet information into your application

**Check for errors in your console**

Example errors:

`tailwindcss(native) rebuilding... Specified input file <path>.css does not exist.`
`tailwindcss(native) rebuilding... Unable to parse input file <path>.css`

**Ensure your are importing your `.css file`**

You should be importing the `.css` in the global scope of your application (before React renders)

**withNativeWind is missing or being overwritten**

In your `metro.config.js`, `withNativeWind` should be called on your final configuration. Changing the options after `withNativeWind` risks creating an invalid config!

```tsx title=metro.config.js
config = withNativeWind(config);

// ❌ You are overriding NativeWind required config!
config.resolver = {};

return config;
```

`withNativeWind` will respect any custom options have you set, including `getTransformOptions`/`transformerPath`, and generally should always be called with your final config.

<h2 id="tailwind-preset">Unable to detect the 'nativewind/preset'</h2>

NativeWind was able to detect and parse a CSS file, but the file parsed did not include NativeWind's Tailwind CSS preset, `nativewind/preset` or was missing the `@tailwind base` directive.

```tsx title=tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["<content>"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],

```

```css title=global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

If both of these conditions are met, NativeWind will add this metadata to the outputted `.css` file located at `node_modules/.cache/nativewind/<input-css-filename>.<platform>.css`

<Tabs>
  <TabItem value="native" label="native" default>

NativeWind uses a custom atRule: `@cssInterop verify nativewind`.

  </TabItem>
  <TabItem value="web" label="web">

NativeWind uses CSS custom properties on the `:root`

```css
:root: {
  --css-interop: true;
  --css-interop-verify-nativewind: true;
}
```

  </TabItem>
</Tabs>

If these flags are not preset in the CSS, then there is an issue with your `tailwind.config.js`
